<template>
  <div class="BlockWork card text-white width-[48%]">
    <client-only>
      <div class="card-before" v-lazy:background-image="imgUrl" />
    </client-only>
    <div class="content space-y-5">
      <h2 class="title">{{ name }}</h2>
      <p>{{ desc }}</p>
      <div>
        <n-button type="primary" @click="findWork" :bordered="false">访问</n-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { NImage, NButton } from "naive-ui";
const props = defineProps({
  imgUrl: {
    type: String,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
  desc: {
    type: String,
    required: true,
  },
  linkUrl: {
    type: String,
    required: true,
  },
  sourceUrl: {
    type: String,
    required: false,
  },
  width: {
    type: String,
    default: "30%",
    required: false,
  },
});
const { imgUrl, desc, linkUrl, name, sourceUrl, width } = props;
const findWork = () => {
  if (linkUrl) window.open(linkUrl);
};
</script>
<style lang="scss" scoped>
$d: 700ms;
$e: cubic-bezier(0.19, 1, 0.22, 1);

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  height: 13rem;
  text-align: center;
  border-radius: 5px;

  .card-before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: center;
    transition: transform $d * 1.5 $e;
    pointer-events: none;
  }

  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    background-image: linear-gradient(to bottom,
        hsla(0, 0%, 0%, 0) 0%,
        hsla(0, 0%, 0%, 0.009) 11.7%,
        hsla(0, 0%, 0%, 0.034) 22.1%,
        hsla(0, 0%, 0%, 0.072) 31.2%,
        hsla(0, 0%, 0%, 0.123) 39.4%,
        hsla(0, 0%, 0%, 0.182) 46.6%,
        hsla(0, 0%, 0%, 0.249) 53.1%,
        hsla(0, 0%, 0%, 0.32) 58.9%,
        hsla(0, 0%, 0%, 0.394) 64.3%,
        hsla(0, 0%, 0%, 0.468) 69.3%,
        hsla(0, 0%, 0%, 0.54) 74.1%,
        hsla(0, 0%, 0%, 0.607) 78.8%,
        hsla(0, 0%, 0%, 0.668) 83.6%,
        hsla(0, 0%, 0%, 0.721) 88.7%,
        hsla(0, 0%, 0%, 0.762) 94.1%,
        hsla(0, 0%, 0%, 0.79) 100%);
    transform: translateY(-50%);
    transition: transform $d * 2 $e;
  }

  .content {
    transition: transform $d $e;
    position: relative;
    width: 100%;
    z-index: 10;
    padding-bottom: 20px;

    h2 {
      line-height: 1.75rem;
      font-weight: 700;
      font-size: 1.25rem;
    }
  }

  [hidden] {
    display: none;
  }

  .space-y-5> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  }
}

@media (min-width: 768px) {
  .width-\[48\%\] {
    width: 48%;
  }
}

@media (hover: hover) and (min-width: 768px) {
  .card:after {
    transform: translateY(0);
  }

  .content {
    transform: translateY(calc(100% - 4rem));

    >*:not(.title) {
      opacity: 0;
      transform: translateY(1rem);
      transition: transform $d $e, opacity $d $e;
    }
  }

  .card:hover {
    align-items: center;

    .card-before {
      transform: translateY(-4%);
    }

    &:after {
      transform: translateY(-50%);
    }

    .content {
      transform: translateY(0);

      >*:not(.title) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc($d/8);
      }
    }
  }

  //.card:focus-within {
  //  .card-before,
  //  &:after,
  //  .content,
  //  .content > *:not(.title) {
  //    transition-duration: 0s;
  //  }
  //}
}
</style>
